<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.Timestamp" %>
<%
    List<Map<String, Object>> wrongList = (List<Map<String, Object>>) request.getAttribute("wrongQuestions");
    int total = (request.getAttribute("totalCount") != null) ? (Integer) request.getAttribute("totalCount") : 0;
    int currentPage = (request.getAttribute("currentPage") != null) ? (Integer) request.getAttribute("currentPage") : 1;
    int pageCount = (request.getAttribute("totalPages") != null) ? (Integer) request.getAttribute("totalPages") : 1;
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错题本 - 科普小站</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-orange-50 min-h-screen text-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-4 h-16">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-flask text-orange-500 text-2xl"></i>
                <span class="text-xl font-bold">科普小站</span>
            </div>
            <div class="flex items-center space-x-2">
                <a href="index.jsp" class="px-4 py-2 hover:text-orange-500">首页</a>
                <a href="article.jsp" class="px-4 py-2 hover:text-orange-500">科普文章</a>
                <a href="${pageContext.request.contextPath}/books" class="px-4 py-2 hover:text-orange-500">书籍购买</a>
                <a href="#" class="px-4 py-2 text-orange-500 border-b-2 border-orange-500 font-medium">错题本</a>
                <a href="${pageContext.request.contextPath}/user-profile" class="px-4 py-2 hover:text-orange-500">个人信息</a>
            </div>
        </div>
    </nav>
    <!-- 主内容区 -->
    <main class="max-w-4xl mx-auto px-4 py-12">
        <h2 class="text-2xl font-bold mb-8 flex items-center text-orange-700"><i class="fa-solid fa-book text-orange-500 mr-2"></i> 错题本</h2>
        <% if (wrongList == null || wrongList.isEmpty()) { %>
            <div class="text-center text-gray-400">暂无错题记录</div>
        <% } else { %>
            <div class="space-y-6">
            <% for (Map<String, Object> q : wrongList) { %>
                <div class="bg-white shadow-lg rounded-2xl p-6 relative border-l-4 border-orange-400">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm text-gray-400"><i class="fa-regular fa-clock mr-1"></i>答错时间：<%= ((Timestamp)q.get("wrongTime")).toLocaleString() %></span>
                        <div class="flex items-center space-x-2">
                            <form method="post" action="wrong-questions" style="display:inline;" onsubmit="return false;">
                                <button type="button" class="text-red-500 hover:text-red-700" title="删除" onclick="deleteWrong('<%= String.valueOf(q.get("questionId")).replace("'", "\\'") %>')"><i class="fas fa-trash"></i></button>
                            </form>
                            <form method="get" action="quiz.jsp" style="display:inline;">
                                <input type="hidden" name="wrongOnly" value="1" />
                                <input type="hidden" name="questionId" value="<%= String.valueOf(q.get("questionId")) %>" />
                                <button type="submit" class="text-orange-500 hover:text-orange-700" title="重新答题"><i class="fas fa-redo"></i></button>
                            </form>
                        </div>
                    </div>
                    <div class="font-semibold mb-2 text-lg text-orange-700"><%=q.get("question")%></div>
                    <ul class="mb-2 text-gray-700">
                        <li>A. <%=q.get("optionA")%></li>
                        <li>B. <%=q.get("optionB")%></li>
                        <li>C. <%=q.get("optionC")%></li>
                        <li>D. <%=q.get("optionD")%></li>
                    </ul>
                    <div class="text-sm text-green-600">正确答案：<%=q.get("answer")%></div>
                    <div class="text-xs text-gray-400 mt-1">解析：<%=q.get("explanation")%></div>
                </div>
            <% } %>
            </div>
            <!-- 分页 -->
            <div class="flex justify-center mt-8 space-x-2">
                <% for (int i = 1; i <= pageCount; i++) { %>
                    <% if (i == currentPage) { %>
                        <span class="px-3 py-1 bg-orange-500 text-white rounded"><%=i%></span>
                    <% } else { %>
                        <a href="wrong-questions?page=<%=i%>" class="px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-orange-100"><%=i%></a>
                    <% } %>
                <% } %>
            </div>
        <% } %>
    </main>
    <!-- 底部信息区（与首页一致） -->
    <footer class="bg-gray-900 text-white py-10 mt-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-flask text-orange-400 text-2xl"></i>
                        <span class="text-xl font-bold">科普小站</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">探索科学的奇妙世界</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">内容分类</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">天文宇宙</a></li>
                        <li><a href="#" class="hover:text-white">生命科学</a></li>
                        <li><a href="#" class="hover:text-white">物理化学</a></li>
                        <li><a href="#" class="hover:text-white">科技创新</a></li>
                        <li><a href="#" class="hover:text-white">地球环境</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#about" class="hover:text-white">关于我们</a></li>
                        <li><a href="submit-article.jsp" class="hover:text-white">我要投稿</a></li>
                        <li><a href="${pageContext.request.contextPath}/books" class="hover:text-white">书籍购买</a></li>
                        <li><a href="feedback.jsp" class="hover:text-white">问题反馈</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                    <p class="text-gray-400 text-sm mb-4">订阅我们的科普周刊，获取最新科学资讯</p>
                    <div class="flex">
                        <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <button class="bg-orange-500 hover:bg-orange-600 text-white px-4 rounded-r-lg"><i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 科普小站. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    <script>
    function deleteWrong(questionId) {
        if (!confirm('确定要删除这道错题吗？')) return false;
        fetch('wrong-questions?questionId=' + questionId, {method: 'DELETE'})
            .then(res => { if (res.ok) location.reload(); else alert('删除失败'); });
        return false;
    }
    </script>
</body>
</html> 